<template>
  <!-- 子菜单列表 -->
  <ul class="fileItemMenu">
    <li @click="fileItemMenuClick(1, $store.state.nowItemFile)">
      <i class="iconfont icon-fuzhi"></i>
      <span>复制</span>
    </li>
    <li @click="fileItemMenuClick(2, $store.state.nowItemFile)">
      <i class="iconfont icon-yangbenjianqie"></i>
      <span>剪切</span>
    </li>
    <p></p>
    <li @click="fileItemMenuClick(3, $store.state.nowItemFile)">
      <i class="iconfont icon-24gl-rename"></i>
      <span>重命名</span>
    </li>
    <li @click="fileItemMenuClick(4, $store.state.nowItemFile)">
      <i class="iconfont icon-shanchu"></i>
      <span>删除</span>
    </li>
    <p></p>
    <li @click="fileItemMenuClick(5, $store.state.nowItemFile)">
      <i class="iconfont icon-fenxiang"></i>
      <span>分享</span>
    </li>
    <li @click="fileItemMenuClick(6, $store.state.nowItemFile)">
      <i class="iconfont icon-wendangjiami"></i>
      <span>加密</span>
    </li>
    <p></p>
    <li @click="fileItemMenuClick(7, $store.state.nowItemFile)">
      <i class="iconfont icon-shuxing"></i>
      <span>属性</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "FileItemMenu",
  methods: {
    // 点击子菜单列表项时
    fileItemMenuClick(id, file) {
      // console.log(id, file);
      switch (id) {
        case 1:
          console.log("复制");
          console.log(file);
          this.hideFileItemMenu();
          break;
        case 2:
          console.log("剪切");
          console.log(file);
          this.hideFileItemMenu();
          break;
        case 3:
          console.log("重命名");
          console.log(file);
          // 显示设置名称
          this.$store.commit("setShowSetName", true);
          // this.showSetName = true;
          // 设置名称模式为重命名
          this.$store.commit("setSetNameMode", 2);
          // this.setNameMode = 2;
          // 重命名默认
          this.$store.commit("setNowName", this.$store.state.nowItemFile.title);
          //   this.nowName = this.$store.state.nowItemFile.title;
          // 获取子菜单列表元素
          const fileItemMenu = document.querySelector(".fileItemMenu");
          // 隐藏子菜单列表
          fileItemMenu.style.height = "";
          setTimeout(() => {
            fileItemMenu.style.padding = "";
            // 获取输入框焦点
            // console.log(document.querySelector(".setNameInput"));
            document.querySelector(".setNameInput").focus();
            // this.$refs.setNameInput.focus();
          }, 100);
          break;
        case 4:
          console.log("删除");
          console.log(file);
          this.deleteNoteFun(file.noteid);
          this.hideFileItemMenu();
          break;
        case 5:
          console.log("分享");
          console.log(file);
          this.hideFileItemMenu();
          break;
        case 6:
          console.log("加密");
          console.log(file);
          this.hideFileItemMenu();
          break;
        case 7:
          console.log("属性");
          console.log(file);
          this.hideFileItemMenu();
          break;
      }
    },
    // 隐藏子菜单列表
    hideFileItemMenu() {
      // 获取子菜单列表元素
      const fileItemMenu = document.querySelector(".fileItemMenu");
      // 隐藏子菜单列表
      fileItemMenu.style.height = "";
      setTimeout(() => {
        fileItemMenu.style.padding = "";
      }, 100);
    },
    // 删除笔记
    async deleteNoteFun(noteid) {
      // console.log(noteId);
      // let noteid = new FormData();
      // noteid.append("noteid", noteId);
      // 设置axios的参数
      // var options = {
      //   // 请求api
      //   url: "/educenter/note-list/deleteNote",
      //   // 请求体
      //   data: noteid,
      //   // 请求方式
      //   method: "post",
      //   // 请求头
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      // };
      const { data: res } = await this.$http.deleteNote(noteid);
      if (res.code === 20000) {
        console.log("删除成功");
        // 重新获取笔记列表
        this.$tools.getNote(
          this,
          this.$store.state.nowPath[this.$store.state.nowPath.length - 1]
        );
      } else {
        this.$message.error("删除失败");
      }
      // console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
// 子菜单列表
.fileItemMenu {
  // 绝对定位
  position: absolute;
  // 默认位置
  top: 0;
  left: 0;
  // 默认宽高
  width: 90px;
  height: 0px;
  // 隐藏溢出
  overflow: hidden;
  // 背景颜色
  background-color: white;
  // 层级
  z-index: 10;
  // 动画
  transition: height 100ms ease-in-out 0s;
  // 阴影
  box-shadow: 0 0 15px #cccccc;
  // 圆角
  border-radius: 5px;
  //   分割线
  p {
    //   宽
    width: 80px;
    // 上边框
    border-top: #ddd solid 1px;
    // border-right: #0182c7 solid 50px;
    // 外边距
    margin: 5px auto;
  }
  // 列表项
  li {
    // 弹性盒
    display: flex;
    // 子元素垂直居中
    align-items: center;
    // justify-content: center;
    // 字体大小
    font-size: 14px;
    // 高度
    height: 30px;
    // 内边距
    padding: 0 5px;
    // 小手
    cursor: pointer;
    // 图标
    i {
      // 图标大小
      font-size: 18px;
      // 图标颜色
      color: #0497e6;
      margin-right: 5px;
    }
    .icon-yangbenjianqie,
    .icon-24gl-rename,
    .icon-fenxiang,
    .icon-wendangjiami {
      font-size: 16px;
      margin-left: 2px;
    }
    // 鼠标移入时
    &:hover {
      // 背景颜色
      background-color: #e3f4fd;
    }
  }
}
</style>